<!doctype html>
{php}
    $static = '/static/home/';
{/php}
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
{include file='public/header'}

<div class="url-box">
    <div class="container">
        <h1>二维码/短网址生成器，访问数据分析工具</h1>
        <div class="dashboard-url-box">
            <input type="text" class="input-url" name="link" placeholder="支持输入https://或http://开头的链接" />
            <button type="button" class="btn input-button js-ajax-submit">生成短链</button>
        </div>
        <div class="box-errors">
            <span class="res-error"></span>
        </div>
        <div id="temp-qr-info" style="display: none">
            <div id="q-details">
                <div class="pc-details-des">想要获取统计数据以及更多高级功能?</div>
                {if condition="$userId eq 0"}
                    <div class="mobile-details-des">统计数据以及更多功能</div>
                    <div class="q-details-r">马上<a href="{:url('user/login')}"> 登录/注册</a></div>
                {/if}
            </div>

            <div class="qr-list">
                <div class="item" >
                    <div class="qr-code-info">
                        <div class="complex"></div>
                        <div class="original-url"></div>
                    </div>
                </div>
            </div>
            <div id="anonymous-warning">
                <div>注：匿名链接仅可被访问30次且有效期3天</div>
            </div>
        </div>
    </div>
</div>

<div id="images-screen">
    <div class="container">
        <div class="invite-register">
            <h1>开启高效分发新时代</h1>
            <a href="{:url('user/register')}">马上免费注册</a>
        </div>
    </div>
</div>

<style type="text/css">
    .url-box {
        background-size: cover;
        display: flex;
        align-items: center;
        justify-items: center;
        margin:150px auto;
    }
    .url-box h1{
        text-align: center;
        padding-bottom: 35px;
    }
    .dashboard-url-box {
        margin: 0 auto;
        width: 900px;
        height: 52px;
        text-align: center;
    }
    .input-url {
        display: inline-block;
        width: 640px;
        height: 100%;
        color: #000;
        border: 1px solid #e3e6e7;
        border-left: 3px solid #506ee4;
        padding-left: 20px;
    }
    .input-button {
        display: inline-block;
        background-color: #506ee4;
        color: #fff;
        border: 0;
        margin-left: 16px;
        width: 123px;
        height: 100%;
    }
    .input-button:hover {
        color: #fff;
    }
    .box-errors {
        height: 25px;
        line-height: 25px;
        text-align: center;
    }

    .box-errors .res-error {
        color: #ff0000;
    }

    #temp-qr-info {
        width: 780px;
        background-color: #fff;
        margin: auto;
        border-radius: 4px;
        box-shadow: 0 1px 5px 0 rgba(38,39,44,.2);
    }
    #temp-qr-info #q-details {
        background-color: #edf0fc;
        border-radius: 4px 4px 0 0;
        color: rgba(0,0,0,.65);
        height: 46px;
        display: flex;
        padding: 0 20px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    #temp-qr-info .qr-list>.item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    #temp-qr-info .qr-list>.item .qr-code-info {
        flex: 1 1;
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    #temp-qr-info .qr-list>.item .qr-code-info .complex {
        display: flex;
        padding: 10px 15px;
        color: #999999;
    }
    #temp-qr-info .qr-list>.item .qr-code-info .complex a{
        line-height: 34px;
    }
    #temp-qr-info .qr-list>.item .qr-code-info .original-url {
        color: rgba(0,0,0,.35);
        padding: 5px 15px 10px 15px;
        color: #999999;
    }
    #temp-qr-info #anonymous-warning {
        background-color: #edf0fc;
        border-radius: 0 0 4px 4px;
        padding: 0 20px;
        height: 46px;
        line-height: 46px;
        text-align: left;
    }


    #images-screen {
        margin-top: 50px;
    }
    #images-screen .invite-register a {
        display: block;
        width: 196px;
        height: 52px;
        margin: 48px auto 0;
        color: #fff;
        line-height: 52px;
        background: #506ee4;
        text-align: center;
    }
    #images-screen .invite-register h1 {
        text-align: center;
    }
    #images-screen #pic-1{
        margin-bottom: 360px;
    }
    #images-screen #pic-2{
        margin-bottom: 360px;
    }
    #images-screen #pic-3{
        margin-bottom: 360px;
    }
    #images-screen .center-box p {
        margin-top: 24px;
        font-size: 16px;
        font-weight: 300;
        color: rgba(0,0,0,.65);
    }
</style>
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{$static}libs/layer/layer.js"></script>
<script type="text/javascript">
    $(".js-ajax-submit").click(function () {
        var link = $('input[name=link]').val();
        $.ajax({
            url: "{:url('index/buildUrl')}",
            type: "POST",
            data: {link:link},
            dataType: 'json',
            async: true,
            success: function (res) {
                if (res.errorCode === 200) {
                    $('#temp-qr-info').show();
                    $('.complex').html(res.data.shortUrl);
                    $('.original-url').html(res.data.link);
                } else {
                    layer.alert(res.message, {
                        title: '提示',
                        icon: 2
                    });
                }
            }
        });
    });
</script>
</body>
</html>	